<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     canvas {
        box-shadow: 0 0 5px #d8c2b4;
        display: block;
        margin: 20px auto;
    }
</style>
<body>
    <canvas></canvas>
</body>
<script>
    // 获取画布
    let canvas=document.querySelector("canvas")
    // 获取一支笔
    let ctx=canvas.getContext("2d")

    // 设置画布宽高
    canvas.width=600
    canvas.height=400


    // 设置填充色
    ctx.fillStyle="#ffdee9"
    // 设置起始坐标
    let x=0;y=0
    // 控制方向 true：正向  false：反向
    let yTag=true,xTag=true 

    setInterval(()=>{
        // 清除原来位置
        ctx.clearRect(x,y,50,50) 
        // 控制矩形x轴前进方向
        if(xTag){ 
            x++
        }else{
            x--
        }
          // 控制矩形y轴前进方向
        if(yTag){ 
            y++
        }else{
            y--
        }
        // 达到下边界时候，转向
        if(yTag==true&&y>=350){
            yTag=false
        }
        // 达到右边界时候，转向
        if(xTag==true&&x>=550){
            xTag=false
        }
         // 达到上边界时候，转向
         if(yTag==false&&y==0){
            yTag=true
        }
        // 达到左边界时候，转向
        if(xTag==false&&x==0){
            xTag=true
        } 
        
        
        ctx.fillRect(x,y,50,50)
    },10)




</script>
</html>